<template>
	<div id="main">
		<el-container>
			<el-header v-show="isShow">
				<app-header :name='this.username'></app-header>
			</el-header>
			<el-container>
				<app-sidebar v-show="isShow"></app-sidebar>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
	// 引入公共头部组件
	import appHeader from "../components/header";
	import appSidebar from "../components/sidebar";
	export default {
		// 生命公共头部组件
		components: {
			appHeader,
			appSidebar
		},
		data() {
			return {
				username: '',
				resources: [],
				isShow:true
			}
		},
		mounted() {
			this.hide();
			this.getUserInfo();
			this.test();
		},
		methods: {
			// userInfo
			getUserInfo() {
				this.http.post('/api/security/info')
					.then(res => {
						if (res.data.code === 200) {
							let data = res.data.data;
							/* this.$store.dispatch('setMenuList', data.resources);
							this.resources = this.$store.getters.getMenuList; 
							console.log(this.resources); */
							this.username = data.user.userName;
						} else {
							this.$router.replace('/login');
						}
					})
					.catch(error => {
						console.log(error)
					})
			},

			test() {
				console.log(this.$router.options.routes);
			},
			hide(){
				if(this.$router.history.current.path.startsWith("/document")){
					console.log("需要隐藏头部和侧栏");
					this.isShow = false;
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	#main {
		height: 100%;

		.el-container {
			height: 100%;

			.el-header {
				padding: 0;
			}

			.el-main {
				background-color: #FFFFFF;
				padding: 20px 0;
			}

			.el-aside {
				height: 100%;
			}
		}
	}
</style>
